<template>
	<div>
		<Header></Header>
		<Cover title="来自40+学科背景" subtitle="未来实验室的团队在多领域开展交叉研究" img="gywm.jpg"></Cover>
		<div class="page-content">
			<div class="menu">
				<div
					v-for="(item,index) in departments"
					class="menu-item"
					:style="activeMenuItem == index ? 'color: #000' : ''"
					:key="item"
					@click="changeMenu(index)"
				>
					{{ item }}
				</div>
			</div>
			<div class="member-list">
				<div class="member-item" :index="memberList[index].index" v-for="(item, index) in memberList" :key="item.id" @click="gotoDetail(item.id)">
					<img class="member-item-picture" :src="item.image">
					<div class="member-item-info">
						<div class="title">
							{{ item.name }}
							<div class="subtitle ml-10">{{ item.job }}</div>
						</div>
						<div class="desc" :id="item.id">{{ item.info }}</div>
					</div>  
				</div>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
import axios from '../config/http';
export default {
	name: 'Teacher',
	components: {
		Cover: () => import('@/components/Cover.vue'),
		Header: () => import("@/components/Header.vue"),
    Footer: () => import("@/components/Footer.vue")
	},
	data() {
		return {
			memberList: [],
			activeMenuItem: 0,
			departments: ['行政部', '运营部', '技术部', '指导老师']
		};
	},
	created() {
		this.loadData();
	},
	methods: {
		async loadData() {
            let res = await axios.get(`/is/teams/list/${this.activeMenuItem + 1}`)
            this.memberList = res.data.data.data;
		},
        changeMenu(index) {
            this.activeMenuItem = index;
            this.loadData();
        },
		gotoDetail(id) {
			this.$router.push(`/article?type=teams&id=${id}`);
		},
	},
	// mounted() {
	// 	this.insertData();
	// }
};
</script>